<script setup>
import dayjs from 'dayjs';
import { merge } from 'lodash-es';
import { useRouter } from '@/router/index.js';
import { useRequest } from '@/hooks/requestHooks.js';
import { dateFormat } from '@/utils/index.js';
import { getAlarmCalendar } from '@/api/index.js';

const props = defineProps({
  type: { type: String, default: () => 'TG' },
});

const themeToggleStyle = {
  'theme-dark': {
    curMth: {
      color: '#f5f5f5',
      backgroundColor: '#161e35',
    },
    notCurMth: {
      color: '#545864',
      backgroundColor: 'unset',
      // border: '1px solid #232e4a',
    },
  },
  'theme-light': {
    curMth: {
      // color: '#fff',
      // backgroundColor: '#1fa3d2',
      // border: '1px solid #74a3b4',
    },
    notCurMth: {
      color: 'rgba(255,255,255,0.8)',
      backgroundColor: 'unset',
      // border: '1px solid #a5a5a5',
    },
  },
};
const curMthStyle = (theme, data) => {
  const todayBg = {};
  if (dateFormat(data.day, 'DD') === dayjs().format('DD')) todayBg.backgroundColor = '#f58819';
  return merge({}, themeToggleStyle[theme].curMth, todayBg);
};

const month = ref(dayjs().toDate());

const [calendarList, loading, runCalendar] = useRequest(getAlarmCalendar, {
  defaultParams: [{ month: dateFormat(month.value, 'YYYY-MM'), projectType: props.type }],
});

const addMonth = () => {
  month.value = dayjs(month.value).add(1, 'month').toDate();
  runCalendar({ month: dateFormat(month.value, 'YYYY-MM') });
};
const subtractMonth = () => {
  month.value = dayjs(month.value).subtract(1, 'month').toDate();
  runCalendar({ month: dateFormat(month.value, 'YYYY-MM') });
};
const router = useRouter();
const isQiankun = window.__POWERED_BY_QIANKUN__;
const handleClick = () => {
  if (isQiankun) {
    router.push({ path: '/zhny/em/alarmCalendar' });
  }
};
</script>

<template>
  <div class="EMHome-adaptive u-p20 u-base-fg">
    <ul class="u-title20 u-df-spb u-mb20 u-prim-text">
      <li class="u-fs16">告警日历</li>
      <li class="u-df-spb u-fs12">
        <div class="u-df-st u-mr20">
          <div class="calendar-legend"></div>
          能耗告警
        </div>
        <div class="u-df-st">
          <div class="calendar-legend u-bg-blue"></div>
          设备告警
        </div>
      </li>
    </ul>
    <div class="u-divider-bg u-mb20" style="height: 1px"></div>
    <ul class="u-title20 u-df-spb u-mb10">
      <li class="u-df-st u-fs16">
        <i class="el-icon-arrow-left" style="color: #9196a2" @click="subtractMonth"></i>
        <span class="u-mlr10">{{ dateFormat(month, 'YYYY年') }}</span>
        <span class="u-primary u-mr10">{{ dateFormat(month, 'MM月') }}</span>
        <i class="el-icon-arrow-right" style="color: #9196a2" @click="addMonth"></i>
      </li>
      <li class="u-sec-text u-fs14 cursor" style="color: #4f8ecb" @click="handleClick">查看详情</li>
    </ul>
    <div class="sbfx-calendar" :class="$store.state.global.setting.sideTheme">
      <el-calendar v-model="month" v-loading="loading">
        <template slot="dateCell" slot-scope="{ data }">
          <div v-if="data.type === 'current-month'" class="u-df-ct u-h100 u-fd-col">
            <div class="today text-center" :style="curMthStyle($store.state.global.setting.sideTheme, data)">
              {{ dateFormat(data.day, 'D') }}
            </div>
            <div
              :class="
                calendarList?.[dateFormat(data.day, 'D') - 1]?.hasEnergy ||
                calendarList?.[dateFormat(data.day, 'D') - 1]?.hasFacility
                  ? 'u-op1'
                  : 'u-op0'
              "
              class="u-df-ct u-w100 u-h4"
            >
              <div
                v-show="calendarList?.[dateFormat(data.day, 'D') - 1]?.hasEnergy"
                class="calendar-legend u-mr0 u-w4 u-h4"
              ></div>
              <div
                v-show="
                  calendarList?.[dateFormat(data.day, 'D') - 1]?.hasEnergy &&
                  calendarList?.[dateFormat(data.day, 'D') - 1]?.hasFacility
                "
                style="width: 3px; height: 4px"
              ></div>
              <div
                v-show="calendarList?.[dateFormat(data.day, 'D') - 1]?.hasFacility"
                class="calendar-legend u-mr0 u-bg-blue u-w4 u-h4"
              ></div>
            </div>
          </div>
          <div
            v-else
            class="u-df-ct u-h100 u-fd-col"
            :style="themeToggleStyle[$store.state.global.setting.sideTheme].notCurMth"
          >
            <div class="text-center u-mb5">{{ dateFormat(data.day, 'D') }}</div>
            <div class="u-df-ct u-w100 u-h4 u-op0"></div>
          </div>
        </template>
      </el-calendar>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.calendar-legend {
  width: 8px;
  height: 8px;
  margin-right: 5px;
  border-radius: 50%;
  background-color: #e62b2b;
}
.sbfx-calendar {
  width: 100%;
  height: 0;
  flex: 1;
}
.today {
  width: 24px;
  height: 24px;
  line-height: 24px;
  border-radius: 50%;
}
.u-bg-blue {
  background-color: #196be6;
}
.u-mr0 {
  margin-right: 0;
}
.u-w4 {
  width: 4px;
}
.u-h4 {
  height: 4px;
}
.u-mlr10 {
  margin: 0 10px;
}
.u-op1 {
  opacity: 1;
}
.u-op0 {
  opacity: 0;
}

:deep(.el-calendar__body) {
  padding: 0;
  height: 100%;
  table {
    height: 100%;
  }
}
.sbfx-calendar :deep(.el-calendar) {
  // background-color: #161e35;
  height: 100%;
  flex-grow: 1;
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+, edge */
  &::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
}
.sbfx-calendar :deep(.el-calendar .el-calendar__body .el-calendar-table thead th) {
  text-align: center;
  font-size: 14px;
}
.sbfx-calendar :deep(.el-calendar-table .el-calendar-day:hover),
.sbfx-calendar :deep(.el-calendar-table td.is-selected),
.sbfx-calendar :deep(.el-calendar .el-calendar__body .el-calendar-table tbody td:hover) {
  background-color: unset;
}
.sbfx-calendar :deep(.el-calendar-table .el-calendar-day) {
  height: 100%;
  padding: 0;
  color: #303133;
  font-size: 14px;
}
.sbfx-calendar :deep(.el-calendar__header) {
  padding: 0;
  border-bottom: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: none;
}
:deep(.el-calendar-table) {
  td.next {
    pointer-events: none;
  }
  td.prev {
    pointer-events: none;
  }
}
.theme-light {
  :deep(.el-calendar .el-calendar__body .el-calendar-table thead th) {
    background-color: unset;
    color: #606266;
    border: none;
  }
  :deep(.el-calendar .el-calendar__body .el-calendar-table tbody td) {
    border: none;
  }
}
.theme-dark {
  :deep(.el-calendar .el-calendar__body .el-calendar-table thead th) {
    background-color: unset;
    color: #c0c4cc;
    border: none;
  }
  :deep(.el-calendar .el-calendar__body .el-calendar-table tbody td) {
    border: none;
  }
}
</style>
